Generating Containers with connect from React_Redux_FooterLink

Generating Containers with connect() from React Redux (FooterLink)

Now let's use connect() on our FooterLink component.

Recall that our FilterLink component renders a Link with an active prop and an onClick handler.

mapStateToProps

We'll start by writing our mapStateToProps function which we will call mapStateToLinkProps because everything is in a single file, remember? It will accept the state of the Redux store, and return the props that should be passed to the Link component.

The only prop in Link is active, which determines the styling based on the visibilityFilter. We remove the definition from Link's active prop, and move it into mapStateToLinkProps.

const mapStateToLinkProps = (
  state
) => {
  return {
    active:
      props.filter ===
      state.visibilityFilter
  }
};

Notice that active now references the filter prop of the FilterLink component. In order to tell if a Link is active or not, we need to compare this prop with the visibilityFilter in the Redux store's state.

It's common to use the container props when calculating the child props, so we pass them in as a second argument to mapStateToProps. In this case, we'll rename it to ownProps to make it more clear that we are talking about the container component's own props, and not the props that are passed to the child, which is the return value of mapStateToProps.

const mapStateToLinkProps = (
  state,
  ownProps
) => {
  return {
    active:
      ownProps.filter ===
      state.visibilityFilter
  }
};

mapDispatchToProps

Again, we will rename this function to mapDispatchToLinkProps to avoid name collisions.

Initially we know our first argument is the dispatch() function. To see what other arguments we need, we will to look at the container component to see what props depend on the dispatch function.

In this case, we only have the onClick() where we dispatch the action of type 'SET_VISIBILITY_FILTER' along with the filter type. Since there is another reference to props, we will add ownProps as our second argument to mapDispatchToLinkProps.

const mapDispatchToLinkProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

connect() it Up

const FilterLink = connect(
  mapStateToLinkProps,
  mapDispatchToLinkProps
)(Link);

Now that we've used react-redux's connect(), we can remove our old FilterLink implementation, including the contextTypes.

  Previous      Next